<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <link type="text/css" rel="stylesheet" href="${path}/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/order/index.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/css/order/animate.css"/>

    <link rel="stylesheet" type="text/css" href="${path}/css/order/order_list.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/demo.css">
    <style type="text/css">

        td{
            width:15px;
        }
        #outer{
            /*border: 1px solid #ccc;*/
            /*width: 1200px;*/
            /*height: 750px;*/

            /*div居中*/
            margin:auto;
        }

        #header{
            /*border: 1px solid yellow;*/
            /*height: 150px;*/
            /*width: 1175px;*/

            margin-bottom: 2px;
        }

        #middle{
            /*border: 1px solid red;*/
            /*height: 500px;*/

            margin-bottom: 2px;
        }

        #middle_left{
            /*border: 1px solid cadetblue;*/
            /*width: 150px;*/
            /*height: 498px;*/
            float: left;
            margin-left:15px;

            margin-right: 2px;
        }

        #middle_right{

            /*border: 1px solid blue;*/
            /*height: 498px;*/
            /*width: 994px;*/
            /*1.思考整个middle可见区域的宽度798px
            2.middle_left占本身150px+边框2px
            3.margin-right外边距2px
            4.自己的边框2px*/

            /*798-150-2-2-2 = 642px;*/
            float:left;

        }

        #footer{
            /*border:1px solid darkorange;*/
            float: left;
            /*width:798px;*/
            /*1.最外层div内部可见区域的高度750px
            2.header整个高度占120px+2px
            3.margin-buttom占2px
            4.middle整个高度500px+2px
            5.middle距离footer的外边距2px
            6.footer自己本身的高度2px
            750-120-2-2-500-2-2-2; = 120;*/
            /*height: 120px;*/
        }
    </style>
</head>
<body>
<!--最外层div-->
<div id="outer" class="container">
    <!--定义头部head-->
    <div id="header">
        <!--引入导航begin-->
        <%@ include file="../common/header.jsp"%>
        <!--引入导航end-->
    </div>

    <!--中间的内容的div -->
    <div id="middle">
        <!--中间左边的-->
        <div id="middle_left">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">个人资料</a></li>
                <li class="list-group-item"><a href="${path}/user/changepwd">密码修改</a></li>
                <li class="list-group-item"><a href="${path}/addr/list">收货地址管理</a></li>
                <li class="list-group-item"><a href="${path}/order/inquiry">订单管理</a></li>
            </ul>
        </div>
        <!--中间右边的-->
        <div id="middle_right" style="width: 1000px">
            <%--内容--%>

                <div class="container"   >
                    <!--左边-->
                    <div class="container pull-left" style="width: 1100px">
                        <ol class="breadcrumv">
                            <li>
                                <a href="#" class="text-success"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;我的订单</a>
                            </li>
                        </ol>

                        <div  style="width: 1100px">
                            <nav class="navbar navbar-default" role="navigation" style="width: 1100px">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="#">所有订单</a>
                                </div>
                                <form class="navbar-form navbar-left" role="search">
                                    <input type="text" class="form-control" id="orderNo" name="orderNo" value="${orderNo}"
                                           placeholder="输入订单号进行查询">
                                    <button type="button" class="btn btn-search" onclick="checkSize(2)">
                                        <span class="text-success">Search</span>&nbsp;&nbsp;<span
                                            class="glyphicon glyphicon-search"></span>
                                    </button>
                                </form>

                                <ul class="nav navbar-nav navbar-left">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"  style="color: #2ee0b7">
                                            交易状态
                                            <b class="caret"></b>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="${path}/order/inquiry">全部</a>
                                            </li>
                                            <li class="divider"></li>
                                            <c:forEach items="${status}" var="s"  >
                                                <li>
                                                    <a href="${path}/order/inquiry?orderStatus=${s}">${s}</a>
                                                </li>
                                                <li class="divider"></li>
                                            </c:forEach>
                                        </ul>
                                    </li>
                                </ul>
                                <ul class="nav navbar-nav navbar-left">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"   style="color: #2ee0b7">
                                            订单排序
                                            <b class="caret"></b>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="javascript:checkSize(0)">订单日期降序</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="javascript:checkSize(1)">订单日期升序</a>
                                            </li>
                                            <li class="divider"></li>
                                        </ul>
                                    </li>
                                </ul>

                                <ul class="nav navbar-nav">
                                    <li>
                                        <a href="javascript:dee(1)"   style="color: #2ee0b7">删除订单</a>
                                    </li>
                                </ul>
                                <ul class="nav navbar-nav " style="margin-left: 40px">
                                    <li style="padding-right: 15px;">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"  style="color: #0b0b0b"  >更多筛选条件</a>
                                    </li>
                                </ul>


                            </nav>
                        </div>

                        <!--订单查询导航 end-->
                        <!--日期控件-->
                        <div id="collapseTwo" class="panel-collapse collapse" style="margin-left: 150px">
                            <%--  <div class="panel-body">--%>
                            <form class="form-horizontal"  >
                                <div class="form-group has-feedback">
                                    <div class="col-md-2" style="padding-top: 10px; padding-left: 0px; padding-right: 0px; width: 60px; height: 30px;">
                                        开始日期:
                                    </div>
                                    <div class="col-md-3"  >
                                        <input class="easyui-datetimebox" name="start" value="${start}"  labelPosition="left" style="margin-bottom:10px;width: 150px">
                                    </div>
                                    <div class="col-md-2" style="padding-top: 10px; padding-left: 0px; padding-right: 0px; width: 60px; height: 30px;">
                                        结束日期:
                                    </div>
                                    <div class="col-md-3">
                                        <input class="easyui-datetimebox"  name="end" value="${end}" labelPosition="left" style="margin-top:10px;width:150px">
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button"  class="btn btn-info"  onclick="checkSize(2)"  style="margin-bottom:10px;width: 150px">查询&nbsp;&nbsp;<span class="glyphicon glyphicon-search"/></button>
                                    </div>
                                </div>
                            </form>
                            <%-- </div>--%>
                        </div>
                        <!--日期控件-->


                        <!--内容展示 begin-->
                        <div class="table-responsive" id="jus" style="width: 1100px">
                            <c:forEach items="${pageBean.list}" var="o">
                                <table class="table table-hover table-striped" name="tvb">

                                    <caption class="text-info">
                                        <div class="col-md-10" style="padding-left: 0px;">
                                            <input type="checkbox" name="cks" value="${o.orderId}">&nbsp;<fmt:formatDate value="${o.createDate}"  pattern="yyyy-MM-dd hh:mm:ss"></fmt:formatDate>
                                            订单号:${o.orderNo }
                                        </div>
                                        <div class="col-md-2" style="text-align: right;">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse${o.orderId}">订单详情</a>
                                        </div>
                                    </caption>
                                    <thead>
                                    <tr id="collapse${o.orderId}" class="panel-collapse collapse">
                                        <td colspan="9">
                                                <%--与jquery-easyui中的pan
                                                el-body冲突了  所以改掉了jquery-easyui中的panel-body--%>
                                            <div class="panel-body">
                                                <ul id="myTab" class="nav nav-tabs">
                                                    <li class="active">
                                                        <a href="#home" data-toggle="tab">
                                                            联系人信息
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#ios" data-toggle="tab">订单信息</a>
                                                    </li>
                                                </ul>
                                                <div id="myTabContent" class="tab-content">
                                                    <div class="tab-pane fade in active" id="home">
                                                        <div class="row">
                                                            <div>
                                                                <ul class="nav navbar-collapse" style="line-height: 3">
                                                                    <li class="text-info"><span class="text-success">姓名:</span><span
                                                                            class="text-info">${o.user.username }</span></li>
                                                                    <li class="text-info"><span
                                                                            class="text-success">联系方式:</span> ${o.tel}</li>
                                                                    <li class="text-info"><span
                                                                            class="text-success">收货地址:</span>${o.address}</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        </p>
                                                    </div>
                                                    <div class="tab-pane fade" id="ios">
                                                        <div class="row">
                                                            <div>
                                                                <ul class="nav navbar-collapse" style="line-height: 3">
                                                                    <li class="text-info"><span class="text-success">订单编号:</span><span
                                                                            class="text-info">${o.orderNo}</span></li>
                                                                    <li class="text-info"><span
                                                                            class="text-success">交易时间:</span>${o.createDate}PM
                                                                    </li>
                                                                    <li class="text-info"><span
                                                                            class="text-success">订单总金额:</span>${o.total}元
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>    <!--tab选项卡 end-->
                                        </td>
                                    </tr>

                                    <tr class="active" >
                                        <td style="width: 50px">图片</td>
                                        <td>图片名称</td>
                                        <td>单价(元)</td>
                                        <td>数量</td>
                                        <td>实付款(元)</td>
                                        <td>付款日期</td>
                                        <td>交易状态</td>
                                    </tr>
                                    
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${o.items}" var="i">
                                        <tr class="warning">
                                            <td><img src="${path}/images/${i.imgUrl}"></td>
                                            <td>${i.pName}</td>
                                            <td>${i.price}</td>
                                            <td>${i.count}</td>
                                            <td>${i.total}</td>
                                            <td><fmt:formatDate value="${o.createDate}" type="date" pattern="yyyy-MM-dd hh:mm:ss"></fmt:formatDate> </td>
                                            <c:if test="${o.orderStatus=='未付款'}">
                                                <td>
                                                    <button type="button" class="btn btn-info" onclick="buy(this)">进行付款</button>
                                                </td>
                                            </c:if>
                                            <c:if test="${o.orderStatus!='未付款'}">
                                                <td>${o.orderStatus }</td>
                                            </c:if>
                                        </tr>
                                    </c:forEach>
                                    </tbody>

                                </table>
                            </c:forEach>
                        </div>
                    </div>
                </div>
                <%@ include file="../common/pages2.jsp"%>
        </div>
        </section><!--引入分页 begin-->

    </div>

    <!--引入分页 end-->
    <!--尾部-->
    <div id="footer">
        <!--引入footer begin-->
        <%@ include file="../common/footer.jsp"%>
        <!--引入footer end-->
    </div>
</div>
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>

<%--<script src="${path}/dist/js/bootstrap.min.js"></script>--%>
<script src="${path}/js/moment.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="${path}/js/easyui/jquery.easyui.min.js"></script>
<%--<script src="${path}/js/script.js"></script>--%>

<script src="${path}/js/order/dellment.js"></script>

<script type="text/javascript">
    function switchSysBar() {
        var ssrc = document.getElementById("frmTitle").style.display;
        if (ssrc == "none") {
            document.getElementById("frmTitle").style.display = "";
        }
        else {
            document.getElementById("frmTitle").style.display = "none"
        }
    }

    function checkpa() {

        //获取搜索框 跳转框 条数框的值 这里无需进行非空判断  锁定在本页面的 所以标签一定存在
        var orderNo = document.getElementsByName("orderNo")[0].value;
        var pageNow = document.getElementsByName("pageNow")[0].value;
        var pageSize = document.getElementsByName("pageSize")[0].value;
        var start = document.getElementsByName("start")[0].value;
        var end = document.getElementsByName("end")[0].value;
        var v =${pageBean.pageCount};
        var regx = /^[0-9]{1,}$/;
        var sign="${sign}";
        if (regx.test(pageNow)) {
            if (pageNow > v) {
                alert("输入的值不在范围内")
            }
        } else {
            alert("输入无效");
        }

        window.location = "${path}/order/inquiry?pageNow=" + pageNow + "&pageSize=" + pageSize + "&orderNo=" + orderNo + "&start=" + start + "&end=" + end+"&sign"+sign;

    }

    function checkSize(x) {

        var sign=x;
        var orderNo = document.getElementById("orderNo").value;
        var pageSize=document.getElementById("pageSize").value;
        var start = document.getElementsByName("start")[0].value;
        var end = document.getElementsByName("end")[0].value;
        window.location = "${path}/order/inquiry?pageSize="+pageSize+"&orderNo=" + orderNo + "&start=" + start + "&end=" + end+"&sign="+sign;
    }

</script>


</body>
</html>


